<template>
  <curd-page
    :action="action"
    :searchComponents="searchComponents"
    :columns="columns"
    title="添加角色"
    @ok="handleOk"
  >
    <a-form slot="dialog-form">
      <a-form-item label="角色名称" :labelCol="colConfig.labelCol" :wrapperCol="colConfig.wrapperCol">
        <a-input v-model.trim="role.roleName" placeholder="请输入角色名"></a-input>
      </a-form-item>
      <a-form-item label="备注" :labelCol="colConfig.labelCol" :wrapperCol="colConfig.wrapperCol">
        <a-input v-model.trim="role.remark" placeholder="请输入备注"></a-input>
      </a-form-item>
      <a-form-item label="可否编辑" :labelCol="colConfig.labelCol" :wrapperCol="colConfig.wrapperCol">
        <a-switch checkedChildren="是" unCheckedChildren="否" v-model="editabled"/>
      </a-form-item>
    </a-form>
  </curd-page>
</template>

<script>
export default {
  watch: {
    editabled(newVal) {
      if (!newVal) {
        this.role.editabled = 0;
      } else {
        this.role.editabled = 1;
      }
    }
  },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      searchComponents: [{ label: "角色名称", code: "roleName" }],
      editabled: true,
      role: {
        editabled: 1
      },
      columns: [
        { title: "编号", dataIndex: "id", width: 80 },
        { title: "角色名称", dataIndex: "roleName", width: 180 },
        { title: "备注", dataIndex: "remark" }
      ],
      action: {
        query: "role/page",
        delete: "role/delete",
        save: "role/save"
      },
      colConfig: {
        labelCol: {
          span: 5
        },
        wrapperCol: {
          span: 16
        }
      }
    };
  },
  methods: {
    handleOk() {
      alert(1);
    }
  }
};
</script>

<style>
</style>
